<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{:L('message_title')}</title>
    <link rel="stylesheet" href="__PUBLIC__/asset/css/common.css">
    <link href="__PUBLIC__/asset/css/animate.css" rel="stylesheet" type="text/css" media="all">
    <link href="__PUBLIC__/asset/lib/bootstrap/bootstrap.css" rel="stylesheet" type="text/css" media="all">
    <style>
        .frist-text {
            font-size: calc(50px + 0.1vw);
        }

        .sec-text {
            font-size: calc(30px + 0.1vw);
        }

        .info-text {
            font-size: calc(16px + 0.1vw);
            color: var(--geryColor);
        }

        /* 头部标题 */
        .list-title-info {
            width: 50%;
            margin: 3vh 0 6vh;
        }

        /* 类型列表 */
        .list-nav {
            display: flex;
            align-items: center;
            padding: 30px 0;
            border-top: 1px solid var(--geryColor);
            border-bottom: 1px solid var(--geryColor);
        }

        .list-nav-label {
            padding-right: 20px;
            position: relative;
        }

        .list-nav-menu {
            margin: 0;
            padding: 0;
            flex: 1;
            overflow-x: auto;
        }

        .list-nav-menu li {
            display: inline-block;
            margin-right: 30px;
            cursor: pointer;
        }

        .list-nav-menu li:hover {
            color: var(--themeColor);
        }

        .now-menu-item {
            font-weight: bold;
        }

        /* 列表内容 */
        .list-content {
            /* display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-gap: 20px; */
            margin: 8vh 0;
        }

        .list-content-card {
            padding: 0 10px;
            margin-bottom: 20px;
        }

        .content-card {
            display: block;
            width: 100%;
            background-color: white;
            padding: 3vh;
            color: black;
            box-shadow: 0 8px 40px rgba(0, 0, 0, .08);
        }

        .content-card:hover {
            opacity: 1 !important;
        }

        .card-img {
            width: 100%;
            height: 0;
            padding-bottom: 50%;
            position: relative;
            margin-bottom: 20px;
        }

        .card-img img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            object-fit: cover;
        }

        .card-info {
            height: 15vh;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .card-info-tag {
            font-size: calc(16px + 0.1vw);
            background-color: var(--themeColor);
            color: white;
            width: fit-content;
            padding: 0 6px;
        }

        .card-info-text {
            font-size: calc(20px + 0.1vw);
            margin: 14px 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .card-btn {
            margin-top: 15px;
        }

        .card-btn {
            font-size: calc(16px + 0.1vw);
            color: var(--themeColor);
        }

        .iconfont {
            transition: all .3s;
        }

        @media screen and (max-width:1400px) {

            .message-list-box>.middle-box {
                padding: 20px;
            }
        }

        @media screen and (max-width:768px) {
            .frist-text {
                font-size: 30px;
            }

            .list-title-info {
                width: 100%;
            }

            .list-nav {
                display: block;
                line-height: 7vh;
                height: 7vh;
                overflow: hidden;
                padding: 0;
                border-color: #e4e4e4;
                transition: all .3s;
            }

            .list-nav-label::after {
                speak: none;
                content: "\e601";
                font-family: iconfont !important;
                position: absolute;
                top: 0;
                right: 0;
                height: fit-content;
            }

            .list-nav-menu li {
                display: block;
                margin: 0;
            }

            .nav-menu-item {
                height: 7vh;
                line-height: 7vh;
                border-top: 1px solid #e4e4e4;
            }

            .list-content-card {
                padding: 0;
            }

            .list-content {
                margin: 4vh 0;
            }

            .card-info-text {
                font-size: 16px;
            }

            .card-info-time {
                font-size: 12px;
            }
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div class="router-menu wow fadeInUp"></div>
    <div class="message-list-box">
        <div class="middle-box">
            <div class="list-title wow fadeInUp">
                <div class="list-title-name frist-text"></div>
                <div class="list-title-info info-text"></div>
            </div>
            <div class="list-nav wow fadeInUp" data-wow-delay="0.3s">
                <div class="list-nav-label info-text">{:L('message_3')}:</div>
                <ul class="list-nav-menu">
                </ul>
            </div>
            <div class="list-content row">
                <volist name="posts" id="vo">
                    <div class="list-content-card col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;">
                        <a class="content-card" href="{:U('message/details',['type'=>'info','key'=>$vo['id']])}">
                            <div class="card-img">
                                <img src="{$vo.cover}" alt="">
                            </div>
                            <div class="card-info">
                                <div class="card-info-tag">{$vo.tag}</div>
                                <div class="card-info-text">{$vo.title}</div>
                                <div class="card-info-time info-text">{$vo.send_date}</div>
                            </div>
                            <div class="card-btn">
                                <i class="iconfont icon-youjiantou- frist-icon"></i>
                            </div>
                        </a>
                    </div>
                </volist>
            </div>
            <div class="pagenation-main"></div>
        </div>
    </div>
    <div class="footer"></div>
</body>
<script src="__PUBLIC__/asset/lib/wow/wow.min.js"></script>
<script src="__PUBLIC__/asset/lib/jquery_3.2.1.min.js"></script>
<script src="__PUBLIC__/asset/lib/bootstrap/bootstrap.js"></script>
<script src="__PUBLIC__/asset/js/common.js"></script>
<script>
    $(document).ready(function () {
        //页面显示过度动画插件
        new WOW().init()
        let width = document.body.clientWidth

        //记录A标签跳转
        function bindCard() {
            $('.content-card').each(function () {
                console.log('点击事件');
                let _this = this
                $(_this).on('click', function (e) {
                    // e.preventDefault()
                    localStorage.setItem('path', JSON.stringify({
                        name: document.title,
                        path: location.href
                    }))
                })
            })
        }
        function bindNav() {
            if (width <= 768) {
                $('.list-nav-label').on('click', function () {
                    let menuHeight = $('.list-nav-menu').outerHeight() * 1
                    let labelHeight = $(this).outerHeight() * 1
                    console.log('点击了', menuHeight, labelHeight);

                    if ($('.list-nav').outerHeight() * 1 > menuHeight) {
                        $('.list-nav').css('height', labelHeight)
                        return
                    }
                    $('.list-nav').css('height', `${menuHeight + labelHeight}px`)
                })
            }
            $('.list-nav-menu li').each(function () {
                let _this = this
                $(_this).on('click', function () {
                    $(this).siblings().removeClass('now-menu-item')
                    $(this).addClass('now-menu-item')

                    var id = $(this).attr('data-id');
                    window.location.href = "/messageList-index-cate-"+id
                })
            })
        }

        let classList = '{$cates}';
        if(classList != ''){
            classList = JSON.parse(classList)
        }else{
            classList = []
        }

        function setList() {
            let listDome = ''
            let navDome = ''

            classList.forEach((item, index) => {
                navDome += `<li class="nav-menu-item info-text ${index ? '' : 'now-menu-item'}" data-id="${item.id}">${item.value}</li>`
            })
            $('.list-title-name').text('{:L("message_1")}')
            $('.list-title-info').text('{:L("message_2")}')
            $('.list-nav-menu').append(navDome)
            setTimeout(() => {
                bindCard()
                bindNav()
            }, 300);
        }
        setList()
    })

    $(function () {
        $('.pagenation-main').load('../public-pagenation.html?type=messageList&maxpage={$maxpage}&page={:I("page",1)}');
    });
</script>

</html>